<script setup lang="ts">
import { ref } from 'vue'
import EditSubmit from './EditSubmit.vue'
import { getWorkflowTemplates } from '@/api/examples'

let dataList = ref([])

let searchName = ref('')

let dialogVisible = ref(false)

let workflowDataRaw = () => ({
  name: '',
  formData: [],
  flowData: {
    nodesData: [],
    linesData: []
  }
})
let workflowData = ref(workflowDataRaw())

const openDialogByEdit = (item) => {
  dialogVisible.value = true
  workflowData.value = item
}

const afterSubmit = () => {
  dialogVisible.value = false
  workflowData.value = workflowDataRaw()
}

const initData = () => {
  getWorkflowTemplates().then((res) => {
    dataList.value = res.data
  })
}
initData()
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <EditSubmit :data="workflowData" @submit="afterSubmit" />
    </el-dialog>
    <el-card class="w-full">
      <el-input class="search" v-model="searchName" clearable placeholder="输入任务名查询" />
      <el-button
        v-for="item of dataList.filter((v) => v.name.includes(searchName))"
        :key="item.field"
        type="primary"
        icon="Plus"
        @click="openDialogByEdit(item)"
        >{{ item.name }}</el-button
      >
    </el-card>
  </div>
</template>

<style scoped>
.search {
  display: flex;
  width: 150px;
  margin-bottom: 10px;
}
</style>
@/api/examples
